<template>
    <div class="author-blocks">
      <el-card class="author-items">
        <div class="author-item" v-for="(item,index) in authors" :key="index">
          <el-row style="width: 100%; font-size: 14px">
            <el-col :span="3">
              <!-- <el-image v-if="author_avatars[index]&&author_avatars[index]!==''" :src="author_avatars[index]"></el-image>
              <el-image v-else
                        src="https://img-1304418829.cos.ap-beijing.myqcloud.com/avatar-grey-bg.jpg">
              </el-image> -->
              <img class="img" alr="" src="../assets/images/avatar-grey-bg.jpg" width="80px" height="80px">
            </el-col>
            <el-col :span="12" style="padding-left: 10px; text-align: left">
              <div class="author-name" style="cursor:pointer;" @click="gotoSch(item.author_id,item.user_id)">{{ item.name }}的认证申请</div>
              <div>{{ item.affiliation_name }}</div>
              <div style="margin-top: 3px; margin-bottom: 3px">
                <span v-for="(area, index) in item.tags" v-bind:key="index">
                  <el-link v-if="index<5" style="color: #2d94d4;" @click="toArea(area)">{{ area }}</el-link>
                  <!-- <el-link v-else style="color: #2d94d4;" @click="toArea(area)">{{ }}</el-link> -->
                  <span  style="margin-left: 4px; margin-right: 4px; color:#2d94d4;" v-if="index!==item.tags.length-1 && index<5">/</span>
                </span>
              </div>
            </el-col>
            <el-col :span="9">
                <div class="button">
              <el-button type="info" @click="refuse(index,item.user_id)">拒绝</el-button>
              <el-button type="success" @click="accept(index,item.user_id)">通过</el-button>
                </div>
            </el-col>
          </el-row>
          <el-divider v-if="index<authors.length-1"></el-divider>
        </div>
      </el-card>
    </div>
</template>
  
  <script>
  export default {
    name: "AuthorBlocks",
    flag:0,
    props: ['authors', 'author_avatars'],
    methods: {
      gotoSch(author_id,user_id) {
        let routeUrl = this.$router.resolve({
          path: '/applyDetail',
          query: { v: author_id,u: user_id }
        });
        window.open(routeUrl .href, "_self");
      },
      toArea(area) {
        let routeUrl = this.$router.resolve({
          path: '/searchRes',
          query: { field: area }
        });
        window.open(routeUrl .href, "_self");
      },

      refuse(nowindex,uid){
        this.flag=0
        const formdata1 = new FormData();
        formdata1.append("uid",uid)
        formdata1.append("flag",this.flag)
        this.$axios({
        method: 'post',
        url: '/user/checkCertification/',
        data:formdata1
    })
    .then(res => {
      console.log(res.data)
      if(res.data.code == 200){
        this.$message.success("已拒绝该用户认证")
      }
      else{
        this.$message.error(res.data.msg)
      }
    })
    .catch(err => {
        console.log(err);
    })
        this.authors.splice(nowindex,1)
      },

      accept(nowindex,uid){
        this.flag=1;
        const formdata1 = new FormData();
        formdata1.append("uid",uid)
        formdata1.append("flag",this.flag)
        this.$axios({
        method: 'post',
        url: '/user/checkCertification/',
        data:formdata1
    })
    .then(res => {
      console.log(res.data)
      if(res.data.code == 200){
        this.$message.success("已通过该用户认证")
      }
      else{
        this.$message.error(res.data.msg)
      }
    })
    .catch(err => {
        console.log(err);
    })
        this.authors.splice(nowindex,1)
      }
    }
  }
  </script>
  
  <style scoped>

  .button{
    position: relative;
    margin: auto;
    margin-top: 5%;
    margin-left:30%
  }
  
  .author-name {
    color: #2d94d4;
    cursor: pointer;
    font-size: 14px;
}

.paper-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    font-family: Tahoma,fantasy;
}

.abstract {
    cursor: pointer;
    font-family: Georgia, Lato-Regular,Lato,sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #262625;
}

.citation-count {
    margin-top: 10px;
    font-family: "Trebuchet MS", fantasy;
    font-size: 13px;
    font-weight: 400;
    color: #73716f;
    line-height: 22px;
}

.publish-year {
    color:grey;
    font-size: 14px;
}

.author-affiliation {
    color:grey;
    font-size: 14px;
}
  .author-blocks .author-items {
    margin-top: 20px;
    padding: 20px 10px;
  }
  
  .author-blocks .author-item >>> .el-image{
    height: 70px;
    width: 70px;
    border-radius: 50%;
  }
  
  .author-blocks .author-item >>> .el-scrollbar__wrap {
    overflow-x: hidden;
  }
 .author-blocks .author-items .author-name {
    color: black;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  
  .author-blocks .author-items .article-count {
    margin-top: 55px;
  }
  
  </style>